<template>
	<view class="content">
		<view class="title">
			<text>填写用户信息</text>
		</view>

		<view class="item">
			<text>手机号：</text><input class="inp" type="text" v-model="phoneNumber" value="" placeholder="请输入手机号" />
		</view>

		<view class="item">
			<text>验证码：</text>
			<view class="phonecode">
				<input class="inp" type="text" v-model="code" placeholder="请输入验证码" />
				<button class="button-phone" type="primary" style="background-color: #58f;"
					@click="getphonecode">获取验证码</button>
			</view>
		</view>

		<view class="item">
			<text>密码：</text>
			<view class="pass inp">
				<input class="inp" :type="open1? 'text':'password'" v-model="password" placeholder="请输入密码" />
				<image :src="open1 ? '/static/open-eye.png':'/static/close-eye.png'" class="eye inp"
					@click="changeps1" />
			</view>
		</view>
		<view class="item">
			<text>再次输入密码：</text>
			<view class="pass inp">
				<input class="inp" :type="open2? 'text':'password'" v-model="password2" placeholder="请再次输入密码"
					@blur="comparepass($event)">
				<image :src="open2 ? '/static/open-eye.png':'/static/close-eye.png'" class="eye inp"
					@click="changeps2" />

			</view>
		</view>
		<text v-if="!sim" style="color: red;display: inline-block;font-size: 14px;">两次输入的密码不一样</text>
		<view class="item">
			<view class="list">
				<view class="list-cell">
					<view class="list-cell-left">
						身份选择：
					</view>
					<view class="list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<button type="primary" @click="signup" style="background-color: #58f;">注册</button>


	</view>
</template>

<script>
	import utils from "../../common/utils.js"
	const api = utils.websiteUrl;
	export default {
		data() {
			return {
				array: ['用户', '司机'],
				index: 0,
				open1: false, //默认不显示密码
				open2: false, //默认不显示密码
				password: '',
				password2: '',
				phoneNumber: '',
				uuid: '', //对应验证码的data
				sim: true, //两次密码是否一样
				code: '',

			}
		},

		methods: {
			signup: function() {
				if (this.sim == true && this.phoneNumber && this.uuid) {
					uni.request({
						url: api + 'user/register2',
						method: 'POST',
						sslVerify: false,
						header: {
							'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
							// "token":this.token
						},
						data: {
							code: this.code,
							password: this.password,
							identity: this.index,
							uuid: this.uuid

						},
						success: (res) => {
							if (res.data.code == '0') {
								uni.redirectTo({
									url: "/pages/login/login"
								})
							}

						},
						fail: (err) => {
							console.log('注册失败', err)
							uni.showToast({
								title: '注册失败',
								duration: 1500,
								image: '/static/错误.png',
								position: 'center'
							})

						}

					})
				} else {
					uni.showToast({
						title: '信息不完善',
						duration: 1500,
						image: '/static/错误.png',
						position: 'center'
					})
				}

			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

			changeps1() {

				this.open1 = !this.open1
			},
			changeps2() {

				this.open2 = !this.open2
			},
			getphonecode() {
				let that = this;
				uni.request({
					url: api + 'user/sendVerificationCode',
					method: 'GET',
					sslVerify: false,

					data: {
						phoneNumber: that.phoneNumber
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 0) {
							that.uuid = res.data.data
						}
					},
					fail: (err) => {
						console.log(err)
						console.log('请求失败')
					}
				})
			},
			comparepass(e) {
				if (this.password != e.detail.value) {
					this.sim = false
				} else {
					this.sim = true
				}
			}

		},

	}
</script>

<style lang="scss">
	.content {
		padding: 0 60rpx;

		.title {
			font-size: 60rpx;
			color: #0f80ff;
			margin: 100rpx 0;

		}

		.inp {
			background-color: #f7f7f7;
			height: 100rpx;
			border-radius: 20rpx;
			padding-left: 20rpx;
			margin-bottom: 40rpx;
		}



		.list-cell-db {
			background-color: #f7f7f7;
			height: 100rpx;
			border-radius: 20rpx;
			padding-left: 20rpx;
			margin-bottom: 40rpx;
			line-height: 100rpx;
		}

		.phonecode {
			display: flex;
			justify-content: space-around;
		}

		.item {
			.pass {

				display: flex;
				justify-content: space-between;
			}

			.eye {
				margin-top: 30rpx;
				margin-right: 30rpx;
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
				flex-shrink: 0;
				align-items: center;
			}

			.button-phone {
				height: 100rpx;
				// width: 150rpx;
			}

		}



	}
</style>